import React, { Component, Fragment } from 'react'
import Draw from './components/Draw/Draw'
import Text from './components/Text/Text'
import Show from './components/Show/Show'
import Records from './components/Records/Records'
import './App.css'

export default class App extends Component {
    state = {
        isShowPrize: false,
        isShowRecords: false,
    }

    // 改变抽奖结果展示框显示
    changeShowPrize = () => {
        this.setState({ isShowPrize: !this.state.isShowPrize });
    }

    // 改变奖品信息记录展示框显示
    changeShowRecords = () => {
        this.setState({ isShowRecords: !this.state.isShowRecords });
    }

    render() {
        const { isShowPrize, isShowRecords } = this.state;
        return (
            <Fragment>
                <Show isShowPrize={isShowPrize} changeShowPrize={this.changeShowPrize}></Show>
                <div className="center container">
                    <img src="https://s1.ax1x.com/2022/04/26/LHPsoD.png" style={{ width: '600px' }} alt="" />
                    <Draw changeShowPrize={this.changeShowPrize}></Draw>
                    <Text></Text>
                </div>
                <Records isShowRecords={isShowRecords} changeShowRecords={this.changeShowRecords}></Records>
            </Fragment>
        )
    }
}
